<template>
  <el-dialog
      v-model="dialogVisible"
      title="开票信息"
      width="35%"
      :before-close="handleClose"
  >
    <div class="content">
      <el-descriptions
          class="margin-top"
          title="当前开票信息："
          :column="3"
          border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              名称：
            </div>
          </template>
          {{form.invoiceHeader || "暂无"}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              地址：
            </div>
          </template>
          {{form.invoiceAddress || "暂无"}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              税号：
            </div>
          </template>
          {{form.dutyParagraph || "暂无"}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              电话：
            </div>
          </template>
          {{form.invoicePhone || "暂无"}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              开户银行：
            </div>
          </template>
          {{form.openingBank || "暂无"}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              银行账户：
            </div>
          </template>
          {{form.bankAccount || "暂无"}}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false" class="button_cancel2">取消</el-button>
        <el-button type="primary" @click="onConfirm" class="button_view">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref,watch} from "vue";
import {ElDialog,ElDescriptions,ElDescriptionsItem,} from "element-plus";

const props = defineProps({
  visible:{
    type:Boolean,
    default:false
  },
  form:{
    type:Object,
    default: {}
  }
});

let emits = defineEmits(['update:visible','onConfirm'])
const dialogVisible = ref(props.visible);

const handleClose = () => {
  // 需要修改父组件的数据
  emits('update:visible',false);
}

const onConfirm = () => {
  handleClose();
}

// 监听visible的变化 只能监听第一次的变化
watch(()=> props.visible, value => {
  dialogVisible.value = value;
})

// 监听组件内部的dialogVisible变化
watch(() => dialogVisible.value, value => {
  emits('update:visible', value)
})
</script>

<style lang="scss" scoped>
.InvoiceInfoDialogPage{

}
</style>
